<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>填写申请单</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/icon.css" type="text/css"/>
<style type="text/css">
	#dg2{
		border: 3px solid rgb(153,217,234);
	}
	#dg2 tr td{
		width:80px;
		height:30px;
		text-align: center;
		line-height: 30px;
		border:1px solid rgb(181,230,29);
	}
</style>
</head>
<body>
	<h3>填写旧品购物单</h3>
	<hr>
	<!-- 添加删除按钮 -->
	<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width:15%" onclick="addItem()">添加至订单</a>
	<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:15%">提交订单</a>
	<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:100%;height:500px;">
		<div data-options="region:'north'" style="height:50px">
			<h4 style="color:#0099FF;display: inline-block;">点击选择要进行订购的车型</h4>
		</div>
		<div data-options="region:'south',split:true" style="height:50px;">
			<h2 style="color:#0099FF;display: inline-block;">合计</h2>
			<h4 style="display: inline-block;">总数量:&nbsp;&nbsp;<span id="totalCount" style="color: red;">0台</span></h4>
			<h4 style="display: inline-block;">总价:&nbsp;&nbsp;<span  id="totalPrice" style="color: red;">0￥</span></h4>
		</div>
		<div id="priceDetail" data-options="region:'east',split:true,title:'订单明细',collapsible:false" style="width:25%;padding:10px;">
			<table id="dg2" cellspacing="0" title="选购车型列表" style="width:100%;">
					<tr>
						<td>汽车编号</td>
						<td>参考进价</td>
						<td>进购数量</td>
						<td>操作</td>
					</tr>
			</table>
		</div>
		<div data-options="region:'center',title:'库存车型',iconCls:'icon-ok'" style="padding:10px">
			<table id="dg1" class="easyui-datagrid" title="库存车型列表" style="width:100%;height:100%;
			data-options="singleSelect:false">
				<thead>
					<tr>
						<th data-options="field:'ck',checkbox:true"></th>
						<th data-options="field:'itemid',width:50,align:'center'">序号</th>
						<th data-options="field:'carNo',width:100,align:'center'">汽车编号</th>
						<th data-options="field:'dealerName',width:200,align:'center'">供货厂商</th>
						<th data-options="field:'carBrand',width:100,align:'center'">所属品牌</th>
						<th data-options="field:'carType',width:80,align:'center'">款式类型</th>
						<th data-options="field:'engine',width:80,align:'center'">发动机型号</th>
						<th data-options="field:'driver',width:80,align:'center'">驱动方式</th>
						<th data-options="field:'color',width:80,align:'center'">外观色彩</th>
						<th data-options="field:'carImage',width:100,align:'center'">图片展示</th>
						<th data-options="field:'inPrice',width:100,align:'center'">参考进价</th>
						<th data-options="field:'storeCount',width:80,align:'center'">库存数量</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td></td>
						<td>1</td>
						<td>GT000001</td>
						<td>郑州xx车业有限公司</td>
						<td>宝马</td>
						<td>敞篷跑车</td>
						<td>XS0066</td>
						<td>四驱车</td>
						<td>宝石蓝</td>
						<td><img alt="该图片无法加载" src="../statics/images/car.png"></td>
						<td>1000000￥</td>
						<td>10</td>
					</tr>
					<tr>
						<td></td>
						<td>2</td>
						<td>GT000002</td>
						<td>郑州xx车业有限公司</td>
						<td>宝马</td>
						<td>敞篷跑车</td>
						<td>XS0066</td>
						<td>四驱车</td>
						<td>宝石蓝</td>
						<td><img alt="该图片无法加载" src="../statics/images/car.png"></td>
						<td>1000000￥</td>
						<td>10</td>
					</tr>
					<tr>
						<td></td>
						<td>3</td>
						<td>GT000003</td>
						<td>郑州xx车业有限公司</td>
						<td>宝马</td>
						<td>敞篷跑车</td>
						<td>XS0066</td>
						<td>四驱车</td>
						<td>宝石蓝</td>
						<td><img alt="该图片无法加载" src="../statics/images/car.png"></td>
						<td>1000000￥</td>
						<td>10</td>
					</tr>
					<tr>
						<td></td>
						<td>4</td>
						<td>GT000004</td>
						<td>郑州xx车业有限公司</td>
						<td>宝马</td>
						<td>敞篷跑车</td>
						<td>XS0066</td>
						<td>四驱车</td>
						<td>宝石蓝</td>
						<td><img alt="该图片无法加载" src="../statics/images/car.png"></td>
						<td>1000000￥</td>
						<td>10</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	</body>
<script>
	/* 生成订单 */
	function addItem(){
		//获取左边表格中选中项的数据【获得一个object数组】
		var selRows = $('#dg1').datagrid('getChecked'); 
		//获取右边的table
		var tableNode = $("#dg2");
		if(selRows.length>0){
			//遍历车库所有车型
			outter:
			for(var i=0;i<selRows.length;i++){
				//【遍历订单中已有的车型】判断要添加的车型是否在右边订单中存在
				for(var j=0;j<tableNode[0].rows.length;j++){
				     var orderInfo = tableNode[0].rows[j].cells[0].innerHTML; //每一行第一个单元格的内容
				     if(selRows[i].carNo==orderInfo){
				    	 //存在相等的时候直接结束外围for循环的本次循环【结束本次元素添加】
				   		 continue outter; 	 
					 }
				}
				//创建tr
		    	tableNode.append(
		    			"<tr><td>"+selRows[i].carNo+"</td><td>"
		    			+selRows[i].inPrice+"</td><td><input onblur='collect()' placeholder='预购数量' type='text' name='buyCount'/></td><td><button onclick='cancel(this)'>取消</button></td></tr>");
			}
			//添加完毕的时候将所有的复选框取消选择状态
			$('#dg1').datagrid('clearSelections');
		}else{
			alert("请先选择购车类型");
		}
	}
	/*取消选购项*/
	function cancel(obj){
		//删除按钮当前行
		$(obj.parentNode.parentNode).remove();
	}
	/*数据汇总*/
	function collect(){
		//获取右边的table
		var tableNode = $("#dg2");
		//获取table标签中的所有input标签
		var inputNode = $("#dg2 input");
		var count = 0;
		var totalPrice = 0;
		//遍历每一行的数据
		for(var k=1;k<tableNode[0].rows.length;k++){
			var inCount = parseInt(inputNode[k-1].value);
			//当input文本框中输入的有数值的时候，再获取参考进价			
			if(!isNaN(inCount)){
				totalPrice += parseInt(tableNode[0].rows[k].cells[1].textContent)*inCount;
				//总车数量
				count += inCount;
			}
		}
		//设置数据
		$("#totalCount")[0].innerHTML = count+"台";
		$("#totalPrice")[0].innerHTML = totalPrice+"￥";
	}
</script>
</html>